<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>iview example</title>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
</head>
<body>
<div id="app">
    <label for="myDate">Do u  me ?</label>
    <div class="wrap">
        <switch size="sm" :value.sync="toggle"></switch>
    </div>
    <div class="wrap">
        <switch size="sm" :value.sync="toggle" color="blue" :disabled="true"></switch>
    </div>
    <div class="wrap">
        <switch size="sm" :value.sync="toggle" color="orange"></switch>
    </div>
    <div class="wrap">
        <switch size="sm" :value.sync="toggle" color="green"></switch>
    </div>
    <div class="wrap">
        <switch :value.sync="toggle"></switch>
    </div>
    <div class="wrap">
        <switch open-name="Yes" close-name="No" color="blue"
             :value.sync="toggle"></switch>
    </div>
    <div class="wrap">
        <switch open-name="爱哦" close-name="不爱" size="lg" color="orange"
             :value.sync="toggle"></switch>
    </div>
    <div class="wrap">
        <switch open-name="Love" close-name="Hate" size="lg" color="green"
             :value.sync="toggle"></switch>
    </div>
</div>
 
<script>
    //import 'babel-polyfill'; //因为使用了es6的一些方法，需要babel垫片，如果你项目中已有相关兼容性方案，可忽略
    import MySwitch from './MySwitch'
 
    new Vue({
		
		
		
        el: '#app',
        data: {
            toggle: true
        },
        components: {
            'switch': MySwitch
        }
    });
</script> 

</body>
</html>
